<!DOCTYPE html>
<html>
<head>
	<title>Instellingen</title>
	<meta charset="UTF-8" />
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>
	<div class="popoutElement" id="profilePictureOptions">
        <h1>Change profile picture</h1>
        <div class="content">
        	<a class="btn" onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From photo album</a>
        </div>
        <div class="lower">
        	<a onClick="jspi.pop_tgl_profilePic_edit();"><span data-icon="-" aria-hidden="true"></span> Cancel</a>
            <a onClick="jspi.pop_profile_pic_accept();"><span data-icon="/" aria-hidden="true"></span> Accept</a>
        </div>
    </div>	
	<div class="header-container">
		<header class="clearfix">
			<h1 class="title">Settings</h1>
		</header>
	</div>
	<div class="main-container">
		<div class="wrapper clearfix" id="content">
			<div class="profilePicture">
				<a id="profileLink" onClick="jspi.pop_tgl_profilePic_edit();">
					<img id="profilePic" src="#" />
					<div class="profileLabel"><span data-icon="S" aria-hidden="true"></span></div>
				</a>
			</div>
            
			<div id="profielinstellingen">
				<script id="profielinstellingenTemplate" type="text/x-handlebars-template">
					<label for="name">Display name</label>
					<input id="fullname" name="name" value="{{fullname}}" type="text" />
					<label for="backup">Backup number</label>
					<input id="backup" name="backup" value="{{backup}}" type="text" />
					<label for="snooze">Prefered snooze time</label>
					<select id="snooze" name="snooze">
						<option {{selectedeen}} value="1">1 Minuut</option>
						<option {{selectedvijf}} value="5">5 Minuten</option>
						<option {{selectedtien}} value="10">10 Minuten</option>
						<option {{selectedvijftien}} value="15">15 Minuten</option>
					</select>
					<button onClick="profileSave();">Opslaan</button>					
				</script>
			</div>
		</div> <!-- #main -->
	</div> <!-- #main-container -->

	<div class="footer-container">
		<footer>
			<nav id="footer-nav">
				<ul>
					<li>
						<a href="contact.html">
							<img src="images/contacten.png" />
							<span>Contacts</span>
						</a>
					</li>
					<li>
						<a href="wekkers.html">
							<img src="images/wekkers.png" />
							<span>Alarms</span>
						</a>
					</li>
					<li>
						<a href="groepen.html">
							<img src="images/groepen.png" />
							<span>Groups</span>
						</a>
					</li>
					<li class="active">
						<a href="instellingen.html">
							<img src="images/instellingen_a.png" />
							<span>Settings</span>
						</a>
					</li>
				</ul>
			</nav>
		</footer>
	</div>

	<!-- here comes the javascript -->
	<script src="js/jquery-min.js"></script>
	<script src="js/cordova-2.0.0.js"></script>
	<script src="js/plugins.js"></script>
	<script src="js/handlebars.js"></script>
	<script src="js/ajax.js"></script>
	<script src="js/imei.js"></script>
	<script src="js/alarm_everywere.js"></script>
	<script src="js/instellingen.js"></script>
	<script src="js/pic.js"></script>
</body>
</html>